<style scoped >
/*新增，编辑表单*/
    .center{
        color: #7a7677;
        font-size: 14px;
    }
    .ivu-btn-small:first-child{
        padding: 6px 23px;
        font-size: 12px;
        border-radius: 3px;
        color: #fff;
        background: #c7cdcd;
        border:0;

    }
    .ivu-btn-small:first-child:hover {
        padding: 6px 23px;
        font-size: 12px;
        border-radius: 3px;
        background: #c7cdcd;
        color: #fff;
        border:0;
    }
    .ivu-btn-small:last-child{
        padding: 6px 23px;
        font-size: 12px;
        border-radius: 3px;
        color: #fff;
        background: #2db3b4;
        border:0;
    }
    .ivu-btn-small:last-child:hover {
        padding: 6px 23px;
        font-size: 12px;
        border-radius: 3px;
        background: #2db3b4;
        color: #fff;
        border:0;
    }
    .center .ivu-input-wrapper {  width: 90%;  }
    .ivu-form-item .ivu-form-item-content .enDesc{width: 96%;}
    .ivu-form-item .ivu-form-item-content .zhDesc{width: 96%;}
    .fr i{margin-right: 3px;}
</style>
<template>
    <div class="console-product">
        <!-- 头部-->
        <Row class="position">
            <i-col :xs="12" :sm="10" :md="8" :lg="6" >
                <div class="ivu-breadcrumb pos">
                    <span class="ivu-breadcrumb-item-link">当前位置：</span>
                    <span class="ivu-breadcrumb-item-link">物流中心</span>
                    <span class="ivu-breadcrumb-item-separator">/</span>
                    <span class="ivu-breadcrumb-item-link">系统对照</span>
                </div>
            </i-col>
            <i-col class="fr">
            <span>
                <Button @click="addSysContrast" ><i class="iconfont" style="color:#37b3b3;">&#xe649;</i>新增系统对照</Button>
                <Modal class="SysContrast" class-name="popup" v-model="sysContrastModal" width="545" @on-cancel="clearPicOrder('sysContrastValidate')" :mask-closable="false" >
                    <p slot="header" style="color: #eeebeb" v-drag>
                        <span v-if="addCus">新增系统对照</span>
                        <span v-if="editorCus">编辑系统对照</span>
                    </p>
                    <div class="center">
                        <Form  ref="sysContrastValidate"  :model="sysContrastValidate" :rules="ruleSysContrast"  label-position="left" :label-width="80">
                            <input type="hidden" name="id" v-model="sysContrastValidate.id">
                            <Row>
                                <i-col span="12">
                                    <Form-item label="编码:" prop="code">
                                        <Input v-model="sysContrastValidate.code" :disabled="editorCus"></Input>
                                    </Form-item>
                                </i-col>
                                <i-col span="12">
                                    <Form-item label="编码名称:" prop="codeName">
                                        <Input v-model="sysContrastValidate.codeName"></Input>
                                    </Form-item>
                                </i-col>
                            </Row>
                            <Row>
                                <i-col span="12">
                                    <Form-item label="中文单位:" prop="unit">
                                        <Input v-model="sysContrastValidate.unit"></Input>
                                    </Form-item>
                                </i-col>
                                <i-col span="12">
                                    <Form-item label="英文单位:" prop="enUnit">
                                        <Input v-model="sysContrastValidate.enUnit"></Input>
                                    </Form-item>
                                </i-col>
                            </Row>
                            <Row>
                                <i-col span="12">
                                    <Form-item label="海关编码:" prop="hsCode">
                                        <Input v-model="sysContrastValidate.hsCode"></Input>
                                    </Form-item>
                                </i-col>
                                <i-col span="12">
                                    <Form-item label="单净重:" prop="unitWeight">
                                        <Input v-model="sysContrastValidate.unitWeight"></Input>
                                    </Form-item>
                                </i-col>
                            </Row>
                            <Row>
                                <i-col span="24">
                                    <Form-item label="英文描述:" prop="enDesc">
                                        <Input class="enDesc" v-model="sysContrastValidate.enDesc" type="textarea" :rows="1"></Input>
                                     </Form-item>
                                </i-col>
                            </Row>
                            <Row>
                                <i-col span="24">
                                    <Form-item label="中文描述:" prop="zhDesc">
                                        <Input  class="zhDesc" v-model="sysContrastValidate.zhDesc" type="textarea" :rows="1"></Input>
                                    </Form-item>
                                </i-col>
                            </Row>
                        </Form>
                    </div>
                    <div slot="footer">
                        <div class="footer">
                            <Button v-if="editorCus" class="save" :loading="modal_loading" @click="savePicOrder('sysContrastValidate')">保存</Button>
                            <Button v-if="addCus"  class="save":loading="modal_loading" @click="addPicOrder('sysContrastValidate')">保存</Button>
                            <Button v-if="addCus" class="clear" @click="clearPicOrder('sysContrastValidate')">清空</Button>
                            <Button v-if="editorCus" class="clear" @click="cancelPicOrder('sysContrastValidate')">取消</Button>
                        </div>
                    </div>
                </Modal>
            </span>
            </i-col>
        </Row>
        <!-- 头部结束-->
        <!-- 中间主体-->
        <div class="console-product-contcent" id="contcentHeight" :style="{height : height +'px'}">
            <!-- 搜索-->
                <Form class="searchform" ref="systemContrastForm" :model="systemContrastForm" inline  >
                    <Form-item label="编码:" :label-width="35" style="width:160px;">
                        <Input v-model="systemContrastForm.code" @on-enter="systemContrastFormSearch"></Input>
                    </Form-item>
                    <Form-item label="编码名称:" :label-width="65" style="width:190px;">
                        <Input v-model="systemContrastForm.codeName" @on-enter="systemContrastFormSearch"></Input>
                    </Form-item>
                    <Form-item label="海关编码:" :label-width="65" style="width:190px;">
                        <Input v-model="systemContrastForm.hsCode" @on-enter="systemContrastFormSearch"></Input>
                    </Form-item>
                    <Form-item label="创建时间:" :label-width="65" style="width:265px;">
                        <Date-picker type="daterange" v-model="systemContrastForm.createTime" :options="createTime0ptions" placement="bottom-start" style="width: 200px"></Date-picker>
                    </Form-item>
                    <Form-item>
                        <Button class="search" @click="systemContrastFormSearch">搜索</Button>
                    </Form-item>
                </Form>
            <!-- 搜索结束-->
            <Modal v-model="delModal" class-name="delect" width="250" :loading="delLoading" @on-cancel="delCancel" :mask-closable="false" >
                <p slot="header" style="color: #eeebeb" v-drag>
                    <span>提示框</span>
                </p>
                <p class="delbody">
                    <i class="iconfont" style="color: #f76165;font-size: 16px;">&#xe615</i>&nbsp;&nbsp;确认删除？
                </p>
                <div slot="footer">
                    <div class="footer">
                        <Button  class="save" :loading="delLoading" @click="delOK">确认</Button>
                        <Button class="clear" @click="delCancel">取消</Button>
                    </div>
                </div>
            </Modal>
            <!-- 表格-->
            <Loading v-if="spinShow"></Loading>
            <Table v-if="tableShow"  stripe border :columns="systemContrastColumns" :data="systemContrastData"></Table>
            <!-- 表格结束-->
        </div>
        <Row style="background-color: #ffffff;margin-top: 1px;">
            <Col>
            <div v-if="tableShow" class="tablepage clearfix">
                <div class="fl">
                    <span>共</span>
                    <span class="num">{{total}}</span>
                    <span>条记录</span>
                    <span>{{currentPage}}/{{pageTotal}}页</span>
                </div>
                <div class="fr">
                    <Page :total="total" :page-size="pageSize" :current="currentPage" placement="top" show-elevator show-sizer @on-change="changePage" @on-page-size-change="changeSize"></Page>
                </div>
            </div>
            </Col>
        </Row>
    </div>
</template>
<script>
    import Loading from '../../components/loading';
    export default {
        //所需子组件
        components: {Loading},
        data () {
            const validateunitWeight = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请填写单净重'));
                }  else if (!/^([1-9]\d{0,9}|0)([.]?|(\.\d{1,2})?)$/.test(value)) {
                    callback(new Error('请输入数字(最多保留两位小数)'));
                } else {
                    callback();
                }
            };
            return {
                total:0,//总条数
                currentPage:1,//当前页
                pageTotal:1,//总页数
                pageSize:10,//默认每页显示数量
                height:1000,//表单高度
                spinShow: true,//加载层，默认显示
                tableShow: false,//表格层，默认隐藏
                modal_loading: false,
                addCus:false,
                editorCus:false,
                delModal:false,
                delLoading:false,
                systemContrastForm:{//系统对照条件查询
                    code:"",
                    codeName:"",
                    hsCode:"",
                    createTime:[new Date().getTime() - 3600 * 1000 * 24 * 7,new Date()]
                },
                createTime0ptions: {
                    shortcuts: [
                        {
                            text: '最近一周',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近一个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近三个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                return [start, end];
                            }
                        }
                    ]
                },
                //系统对照数据格式
                systemContrastColumns:[
                    {
                        width:'3%',
                        title: '序号',
                        type: 'index'
                    },
                    {
                        width:'7%',
                        title: '编码',
                        key: 'code',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.code,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.code)]);
                        }
                    },
                    {
                        width:'8%',
                        title: '编码名称',
                        key: 'codeName',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.codeName,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.codeName)]);
                        }
                    },
                    {
                        width:'15%',
                        title: '英文描述',
                        key: 'enDesc',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.enDesc,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.enDesc)]);
                        }
                    },
                    {
                        width:'14%',
                        title: '中文描述',
                        key: 'zhDesc',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.zhDesc,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.zhDesc)]);
                        }
                    },
                    {
                        width:'6%',
                        title: '中文单位',
                        key: 'unit',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.unit,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.unit)]);
                        }
                    },
                    {
                        width:'6%',
                        title: '英文单位',
                        key: 'enUnit',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.enUnit,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.enUnit)]);
                        }
                    },
                    {
                        width:'7%',
                        title: '海关编码',
                        key: 'hsCode',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.hsCode,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.hsCode)]);
                        }
                    },
                    {
                        width:'5%',
                        title: '单净重',
                        key: 'unitWeight',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.unitWeight,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.unitWeight)]);
                        }
                    },
                    {
                        width:'10%',
                        title: '创建时间',
                        key: 'createTime',
                        render: (h, params) => {
                            const text = params.row.createTime != null ? new Date(params.row.createTime).format('yyyy-MM-dd hh:mm:ss') : "";
                            return h('Tooltip', {
                                props: {
                                    content: text,
                                    placement:"bottom-start"
                                }
                            }, [h('span', text)]);
                        }
                    },
                    {
                        width:'7%',
                        title: '创建人',
                        key: 'createBy',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.createBy,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.createBy)]);
                        }
                    },
                    {
                        width:'12%',
                        title: '操作',
                        key: 'id',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button',
                                    {
                                        class:"blue",
                                        on: {
                                            click: () => {
                                                this.editSysContrast(params.row.id)
                                            }
                                        }
                                    },
                                    [
                                        h('i', {
                                            class : 'iconfont icon-bianji'
                                        }),
                                        h("span",'编辑')
                                    ]),
                                h('Button',
                                    {
                                        class:"red",
                                        on: {
                                            click: () => {
                                                this.removeSysContrast(params.row.id)
                                            }
                                        }
                                    },
                                    [
                                        h('i', {
                                            class : 'iconfont icon-qingkong'
                                        }),
                                        h("span",'删除')
                                    ])
                            ]);
                        }
                    }
                ],
                //系统对照数据
                systemContrastData:[],
                sysContrastValidate: {
                    id:'',
                    code: '',
                    codeName: '',
                    unit: '',
                    enUnit: '',
                    hsCode: '',
                    unitWeight: '',
                    enDesc: '',
                    zhDesc: ''
                },
                ruleSysContrast: {
                    code: [
                        { required: true, message: '请输入编码', trigger: 'blur' },
                        { type: 'string', max: 20, message: '编码不能大于20位', trigger: 'blur' }
                    ],
                    codeName: [
                        { required: true, message: '请输入编码名称', trigger: 'blur' },
                        { type: 'string', max: 50, message: '编码名称不能大于50位', trigger: 'blur' }
                    ],
                    unit: [
                        { required: true, message: '请输入中文单位', trigger: 'blur' },
                        { type: 'string', max: 10, message: '中文单位不能大于10位', trigger: 'blur' }
                    ],
                    enUnit: [
                        { required: true, message: '请输入英文单位', trigger: 'blur' },
                        { type: 'string', max: 10, message: '英文单位不能大于10位', trigger: 'blur' }
                    ],
                    hsCode: [
                        { required: true, message: '请输入海关编码', trigger: 'blur' },
                        { type: 'string', max: 20, message: '海关编码不能大于20位', trigger: 'blur' }
                    ],
                    unitWeight: [
                        { required: true, validator: validateunitWeight, trigger: 'blur' }
                    ],
                    enDesc:[
                        { type: 'string', max: 100, message: '英文描述不能大于100位', trigger: 'blur' }
                    ],
                    zhDesc:[
                        { type: 'string', max: 100, message: '中文描述不能大于100位', trigger: 'blur' }
                    ]
                },
                sysContrastModal: false
            }
        },
        created:function(){
            var width = window.innerWidth;
            if(width >1600){
                this.height=window.innerHeight-200;
            }else if(width > 1440 && width <=1600){
                this.height=window.innerHeight-180;
            }else if(width > 1366 && width <=1440){
                this.height=window.innerHeight-172;
            }else if(width > 1280 && width <=1366){
                this.height=window.innerHeight-166;
            }else if(width > 1024 && width <=1280){
                this.height=window.innerHeight-162;
            }else{
                this.height=window.innerHeight-151;
            }
            if(window.innerWidth > 1600){
                this.pageSize = 20;
            }
            this.systemContrastData = this.systemContrastTableData(this.systemContrastForm,this.currentPage,this.pageSize)
        },
        mounted() {
        },
        methods: {
            //查询物流数据，条件，当前页，每页显示多少条
            systemContrastTableData (formData,currentPage,pageSize) {
                this.spinShow=true;
                this.tableShow = false;
                var code = formData.code;//编码
                var codeName = formData.codeName;//编码名称
                var hsCode = formData.hsCode;//海关编码
                var fromDate = '';//开始时间
                var toDate = '';//结束时间
                if(formData.createTime.length != 0  && formData.createTime[0] != null && formData.createTime[1] != null){
                    var fromDateTime = (new Date(formData.createTime[0])).getTime();
                    fromDate = new Date(fromDateTime).format("yyyy-MM-dd");
                    var toDateTime = (new Date(formData.createTime[1])).getTime();
                    toDate = new Date(toDateTime).format("yyyy-MM-dd");
                }
                let data = {
                    params: {
                        pageIndex : currentPage,
                        pageSize : pageSize,
                        code : code,
                        codeName : codeName,
                        hsCode : hsCode,
                        fromDate : fromDate,
                        toDate : toDate
                    }
                };
                axios.get('/systemContrases',data).then(res => {
                    this.total=res.data.total;
                    this.pageTotal=Math.ceil(res.data.total / pageSize);
                    this.systemContrastData = res.data.data;
                    this.spinShow=false;
                    this.tableShow = true;
                }).catch(err =>{
                })
            },
            //条件查询
            systemContrastFormSearch(){
                this.currentPage = 1;
                this.systemContrastData = this.systemContrastTableData(this.systemContrastForm,this.currentPage,this.pageSize);
            },
            //改变页数
            changePage: function (page) {
                this.currentPage=page;
                this.systemContrastData = this.systemContrastTableData(this.systemContrastForm,this.currentPage,this.pageSize);
            },
            //改变每页显示多少条
            changeSize: function (pageSize) {
                this.currentPage=1;
                this.pageSize = pageSize;
                this.pageTotal=Math.ceil(this.total / this.pageSize);
                this.systemContrastData = this.systemContrastTableData(this.systemContrastForm,this.currentPage,this.pageSize);
            },
            //新增系统对照
            addSysContrast() {
                var width = window.innerWidth;
                if(width >1600){
                    $("textarea.ivu-input").attr("style","height:32px");
                }else if(width > 1440 && width <=1600){
                    $("textarea.ivu-input").attr("style","height:28px");
                }else if(width > 1366 && width <=1440){
                    $("textarea.ivu-input").attr("style","height:26px");
                }else if(width > 1280 && width <=1366){
                    $("textarea.ivu-input").attr("style","height:26px");
                }else if(width > 1024 && width <=1280){
                    $("textarea.ivu-input").attr("style","height:26px");
                }else{
                    $("textarea.ivu-input").attr("style","height:26px");
                }
                this.sysContrastModal=true;
                this.addCus=true;
                this.editorCus=false;
                this.$refs['sysContrastValidate'].resetFields();
            },
            //保存新增系统对照
            addPicOrder (name) {
                this.modal_loading = true;
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        axios.post('/systemContrases', this.sysContrastValidate).then(res => {
                            this.modal_loading = false;
                            this.sysContrastModal = false;
                            this.addCus = false;
                            this.$refs[name].resetFields();
                            this.systemContrastData = this.systemContrastTableData(this.systemContrastForm,this.currentPage,this.pageSize);
                        }).catch(err =>{
                            this.$Message.error({content: err,duration: 0,closable:true});
                            this.modal_loading = false;
                        });
                    } else {
                        this.modal_loading = false;
                    }
                });
            },
            //根据ID编辑系统对照
            editSysContrast(column) {
                var width = window.innerWidth;
                if(width >1600){
                    $("textarea.ivu-input").attr("style","height:32px");
                }else if(width > 1440 && width <=1600){
                    $("textarea.ivu-input").attr("style","height:28px");
                }else if(width > 1366 && width <=1440){
                    $("textarea.ivu-input").attr("style","height:26px");
                }else if(width > 1280 && width <=1366){
                    $("textarea.ivu-input").attr("style","height:26px");
                }else if(width > 1024 && width <=1280){
                    $("textarea.ivu-input").attr("style","height:26px");
                }else{
                    $("textarea.ivu-input").attr("style","height:26px");
                }
                this.addCus=false;
                this.editorCus=true;
                axios.get('/systemContrases/'+column).then(res => {
                    this.sysContrastValidate = res.data;
                    this.sysContrastValidate.unitWeight = res.data.unitWeight.toString();
                    this.sysContrastModal=true;
                }).catch(err =>{
                })
            },
            //保存编辑系统对照
            savePicOrder (name) {
                this.modal_loading = true;
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        axios.put('/systemContrases', this.sysContrastValidate).then(res => {
                            this.modal_loading = false;
                            this.sysContrastModal = false;
                            this.editorCus = false;
                            this.$refs[name].resetFields();
                            this.systemContrastData = this.systemContrastTableData(this.systemContrastForm,this.currentPage,this.pageSize);
                        }).catch(err =>{
                            this.$Message.error({content: err,duration: 0,closable:true});
                            this.modal_loading = false;
                        });
                    } else {
                        this.modal_loading = false;
                    }
                });
            },
            //根据ID删除系统对照
            removeSysContrast(column) {
                this.delModal=true;
                this.delId = column;
            },
            delOK(){
                this.delLoading = true;
                axios.delete('/systemContras/'+this.delId).then(res => {
                    this.delLoading = false;
                    this.delModal=false;
                    this.systemContrastData = this.systemContrastTableData(this.systemContrastForm,this.currentPage,this.pageSize);
                }).catch(err =>{
                    this.$Message.error({content: err,duration: 0,closable:true});
                });
            },
            delCancel() {
                this.delModal=false;
                this.delId = '';
            },
            //关闭
            cancelPicOrder (name) {
                this.sysContrastModal = false;
                this.addCus = false;
                this.editorCus = false;
                this.$refs[name].resetFields();
            },
            //清空
            clearPicOrder (name) {
                this.$refs[name].resetFields();
            }
        }
    }
</script>